html.dark {
  color-scheme: dark;
}

html.dark .theme.__vbk__ {
  /**-------------------------------------------------------------------------------------------
   * Colors
   *-------------------------------------------------------------------------------------------*/

  --vbk--color-primary: var(--vbk--color-yellow);
  --vbk--color-primary-rgb: 255, 193, 7;

  --vbk--color-text: var(--vbk--color-gray-200);
  --vbk--color-text-rgb: 242, 242, 242;

  --vbk--color-divider: var(--vbk--color-gray-500);

  --vbk--color-bg-100: var(--vbk--color-gray-500);
  --vbk--color-bg-200: var(--vbk--color-gray-600);
  --vbk--color-bg-300: var(--vbk--color-gray-700);
  --vbk--color-bg-400: var(--vbk--color-gray-800);

  --vbk--shadow-color: 0deg 0% 1%;

  /* Elements */
  --vbk--page-md-bg-color: var(--vbk--color-bg-400);

  --vbk--navbar-bg-color: var(--vbk--color-bg-400);
  --vbk--nav-item-bg-color: var(--vbk--color-bg-400);

  --vbk--sidebar-bg-color: var(--vbk--color-bg-400);

  --vbk--scrim-bg-color: var(--vbk--color-bg-100);

  --vbk--toggle-hover-bg-color: var(--vbk--color-bg-100);

  --vbk--code-hl-bg-color: hsl(0, 0%, 15%);

  --vbk--menu-bg-color: var(--vbk--color-bg-200);
  --vbk--menu-border: 0.12rem solid var(--vbk--color-bg-100);
  --vbk--menu-item-hover-bg-color: var(--vbk--color-bg-100);

  /**-------------------------------------------------------------------------------------------
   * Code
   *-------------------------------------------------------------------------------------------*/

  --vbk--code-hl-bg-color: #363b46;
}
